<template>
  <div>
    <el-row v-if="this.menuList.includes('storeRole')" class="btnBox">
      <el-col :span="2" :offset="22"><el-button type="primary" size="small" @click="addRoleFn">添加角色</el-button></el-col>
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation"></simple-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APIROLELIST, APIDELROLESTORE} from '@/common/api.js'
export default {
  components: {
    simpleTable
  },
  data () {
    return {
      menuList: [],
      form: {},
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'role_name', name: '角色名称'},
          {id: 'activated_name', name: '状态'},
          {id: 'describe', name: '权限说明'}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('showRolePermission') || this.menuList.includes('showRolePermission') || this.menuList.includes('destroyRole')) {
      var operation = {id: 'operation', name: '操作', list: []}
      if (this.menuList.includes('showRolePermission')) {
        var operation1 = {id: 'viewRole', name: '查看权限'}
        operation.list.push(operation1)
      }
      if (this.menuList.includes('editRole')) {
        var operation2 = {id: 'edit', name: '编辑'}
        operation.list.push(operation2)
      }
      if (this.menuList.includes('destroyRole')) {
        var operation3 = {id: 'del', name: '删除'}
        operation.list.push(operation3)
      }
      this.tableConfig.config.push(operation)
    }
    this.tableList()
  },
  methods: {
    tableList () {
      this.form.page = this.page
      this.form.limit = this.limit
      APIROLELIST(this.form).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    operation (val) {
      if (val.id === 'edit') {
        this.$router.push({path: './editRole', query: {id: val.rows.id}})
      } else if (val.id === 'del') {
        this.delectFn(val.rows)
      } else if (val.id === 'viewRole') {
        this.$router.push({path: './viewRole', query: {id: val.rows.id}})
      }
    },
    addRoleFn () {
      this.$router.push({path: './addRole'})
    },
    delectFn (e) { // 删除
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APIDELROLESTORE({
          id: e.id
        }).then((res) => {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
            this.InIt()
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
